<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="zalando.ico">

        <title>Zalenium - Dashboard</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link href="css/dashboard.css" rel="stylesheet">
        <script src="js/jquery.min.js"></script>
        <script src="js/tether.min.js"></script>
        <script src="js/bootstrap.bundle.min.js"></script>
        <script src="js/dashboard.js"></script>
    </head>

    <body>
        <div id="ui_blocker" class="ui_blocker">
            <div class="ui_blocker_msg">
                <div>
                    Please wait...
                </div>
            </div>
        </div>

        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <p class="navbar-brand mb-0 mr-5">Zalenium - Dashboard</p>
            <button type="button" class="btn btn-dark ml-5" id="testCount"></button>
            <span class="ml-5 text-white">
                <img alt="Completed" src="img/completed.png" width="24px" height="24px">
                <small>Completed</small>
            </span>
            <span class="ml-2 text-white">
                <img alt="Success" src="img/success.png" width="24px" height="24px">
                <small>Success</small>
            </span>
            <span class="ml-2 text-white">
                <img alt="Failed" src="img/failed.png" width="24px" height="24px">
                <small>Failed</small>
            </span>
            <span class="ml-2 text-white">
                <img alt="Timeout" src="img/timeout.png" width="24px" height="24px">
                <small>Timeout</small>
            </span>


            <div class="collapse navbar-collapse" id="navbarsExampleDefault">
                <ul class="navbar-nav mr-auto"></ul>
                <form class="form-inline mt-2 mt-md-0">
                    <button class="btn btn-danger my-2 my-sm-0" type="button" id="cleanupButton">Cleanup</button>
                    <button class="btn btn-danger ml-2 my-2 my-sm-0" type="button" id="resetButton">Reset</button>
                </form>
            </div>
        </nav>

        <div class="container-fluid">
            <div class="row">
                <nav class="col-sm-3 col-md-3 d-none d-sm-block bg-light sidebar px-1 pt-4">
                    <div>
                        <input id="search" type="text" class="form-control input" placeholder="Search" />
                    </div>
                    <div id="tests" class="nav nav-pills flex-column list-group">
                    </div>
                </nav>

                <main class="col-sm-9 ml-sm-auto col-md-9 pt-1 invisible" role="main" id="main-container">
                    <div class="row mb-1 pt-1 px-1">
                        <div class="card w-100">
                            <h5 class="card-header text-truncate p-1" id="test-name"></h5>
                        </div>
                    </div>
                    <div class="row mb-1 px-1">
                        <div class="col-sm-4 p-0">
                            <div class="card">
                                <div class="card-body p-1" id="browser-platform-proxy">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-8 p-0">
                            <div class="card">
                                <div class="card-body p-1" id="screen-resolution-time-zone">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-1 px-1">
                        <div class="col-sm-12 p-0 text-center">
                            <div class="card invisible">
                                <div class="card-body p-0" id="build"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 px-1">
                            <div class="card">
                                <ul class="nav nav-tabs" id="testTabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-toggle="tab" href="#videoFile" role="tab">Video</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#logs" role="tab">Logs</a>
                                    </li>
                                </ul>

                                <div class="tab-content" id="videoLogsContent">
                                    <div class="tab-pane fade show active" id="videoFile" role="tabpanel">
                                        <div align="center" class="embed-responsive embed-responsive-16by9 bg-faded">
                                            <video id="video" controls autoplay class="embed-responsive-item">
                                                <source id="video-source" src="" type=video/mp4>
                                            </video>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="logs" role="tabpanel">
                                        <div id="accordion" role="tablist" aria-multiselectable="true">
                                            <div class="card">
                                                <div class="card-header" role="tab" id="headingOne">
                                                    <h5 class="mb-0">
                                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                                            Selenium Log
                                                        </a>
                                                    </h5>
                                                </div>

                                                <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne">
                                                    <div class="card-block">
                                                            <pre id="seleniumLog">
                                                                Selenium Log not loaded yet...
                                                            </pre>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div class="card-header" role="tab" id="headingTwo">
                                                    <h5 class="mb-0">
                                                        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                            Browser Driver Log
                                                        </a>
                                                    </h5>
                                                </div>
                                                <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                                                    <div class="card-block">
                                                            <pre id="browserDriverLog">
                                                                Browser Driver Log not loaded yet...
                                                            </pre>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </main>

                <div class="modal fade" id="cleanupModal" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="cleanupModalLabel">Confirmation</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                Are you sure you want to cleanup tests older then {retentionPeriod} days?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
                                <button type="button" class="btn btn-success" id="cleanupModalConfirm">Yes</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="resetModal" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="resetModalLabel">Confirmation</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                Are you sure you want to reset the dashboard?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
                                <button type="button" class="btn btn-success" id="resetModalConfirm">Yes</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </body>
</html>
